<template>
  <el-dialog
      title="详情"
      custom-class="x-large-dialog"
      :visible="visible"
      append-to-body
      @open="open"
      @close="close"
  >
    <div class="detail-pannel">
      <el-form>
        <div class="group-title">用户</div>
        <el-row>
          <el-col :span="6">
            <el-form-item label="用户名称：">{{user.userName}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用户昵称：">{{user.nickName}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="注册时间:">{{user.createdAt | timeFilter}}</el-form-item>
          </el-col>
        </el-row>
        <div class="group-title">用户基本信息</div>
        <el-row>
          <el-col :span="6">
            <el-form-item label="姓；">{{detailData.firstName}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="名：">{{detailData.secondName}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="手机号；">{{detailData.phoneNum}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所在地区：">{{area.name}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="头像："><el-image style="width: 80px;height: 80px;" v-if="detailData.avatar" :src="detailData.avatar.split('|')[0]" /></el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="修改时间：">{{detailData.updatedAt | timeFilter}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地址：">{{detailData.address}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="个人描述：">{{detailData.description}}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div slot="footer">
      <el-button @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { _getDetail } from '../src/store'
import { detailDialog } from '@/mixins'

export default {
  name: 'detailDialog',
  mixins: [detailDialog],
  data() {
    return {
      detailData: {},
      detailFunc: _getDetail
    }
  },
  computed: {
    user() {
      return this.detailData?.user || {}
    },
    area() {
      return this.detailData?.area || {}
    }
  }
}
</script>

<style scoped>

</style>
